<!-- 开药门诊患者信息页面 -->
<template>
  <TopNavigation leftTitle="选择患者信息" rightTitle="" />
  <view class="patientBox">
    <view class="flex-col w-[95%] flex" style="">
      <wd-text custom-class="xzhzxxBox" text="请选择患者信息"></wd-text>
      <wd-text custom-class="tswbBox" text="以便医生给出更准确的治疗，信息仅医生可见"></wd-text>
    </view>
    <view
      v-for="i in loginValue.ManagePatients.length"
      :class="i - 1 == selectPatient ? 'patientD' : 'patientC'"
      @click="changeSelectPatient(i - 1)"
    >
      <view class="mb-20rpx items-center flex justify-between" style="">
        <view class="flex" style="align-items: center; margin: 20rpx 0">
          <text style="font-size: 35rpx; font-weight: 700">
            {{ loginValue.ManagePatients[i - 1].name }}
          </text>
          <text style="margin: 0 20rpx">{{ loginValue.ManagePatients[i - 1].sex }}</text>
          <text>{{ loginValue.ManagePatients[i - 1].age }}</text>
          <view
            v-if="i - 1 == loginValue.defaultA"
            class="bg-[#16c2a3] rounded-4rpx mx-15rpx my-0 flex"
            style="align-items: center; justify-content: center; padding: 0 10rpx"
          >
            <wd-text text="默认" custom-class="morenBox"></wd-text>
          </view>
        </view>
        <wd-icon name="spool" size="22px" />
      </view>
      <text>
        {{ loginValue.ManagePatients[i - 1].identity.slice(0, 3) }}***********{{
          loginValue.ManagePatients[i - 1].identity.slice(14, 19)
        }}
      </text>
    </view>
    <view
      v-if="loginValue.ManagePatients.length < 6"
      class="w-[95%] flex"
      style="
        flex-direction: column;
        align-items: center;
        padding: 50rpx 0;
        margin-top: 20rpx;
        background: #fafafa;
        border-radius: 8px;
      "
      @click="tzaddHzz"
    >
      <wd-icon name="add" size="22px" color="#2CB5A5" />
      <wd-text custom-class="tjhzBox" text="添加患者"></wd-text>
    </view>
    <view class="botbuttom">
      <wd-button type="success" custom-class="custom-shadow" @click="tzZf">下一步</wd-button>
    </view>
    <view class="w-[90%] mt-20rpx">
      <wd-text text="最多添加6个" class="zdtsliugeBox"></wd-text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import TopNavigation from "@/components/TopNavigation.vue";
import { LoginPinia } from "@/store/modules/Login";
const loginValue = LoginPinia();
const selectPatient = ref(0);
//选则患者
function changeSelectPatient(index: number) {
  selectPatient.value = index;
  loginValue.changeSelectPatient(index);
}
function tzZf() {
  console.log("选择药品页面");
  uni.navigateTo({ url: "/pages/SelectMedications/index" });
}
//跳转到添加患者页面
function tzaddHzz() {
  // console.log("跳转到添加患者页面");
  uni.navigateTo({ url: "/pages/addPatient/index" });
}
onMounted(() => {
  loginValue.changeSelectPatient(loginValue.defaultA);
  selectPatient.value = loginValue.defaultA;
});
</script>

<style lang="scss" scoped>
.patientBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(100vh - 220rpx - 44rpx);
  padding-bottom: 126rpx;
  overflow: hidden;
  overflow: scroll;
  background-color: #fff;
  .patientC {
    width: 90%;
    padding: 20rpx;
    margin: 20rpx 0;
    background: #fafafa;
    border-radius: 20px;
  }
  .patientD {
    width: 90%;
    padding: 20rpx;
    margin: 20rpx 0;
    background: #eaf8f6;
    border: 1rpx solid #16c2a3;
    border-radius: 20rpx;
  }
  .xzhzxxBox {
    font-size: 40rpx !important;
    font-weight: medium !important;
    line-height: 60rpx !important;
    color: #121826 !important;
    text-align: left;
    letter-spacing: 0px;
  }
  .tswbBox {
    margin-top: 10rpx;
    margin-bottom: 50rpx;
    font-size: 26rpx !important;
    font-weight: light !important;
    line-height: 38rpx !important;
    color: #6f6f6f !important;
    text-align: left;
    letter-spacing: 0px;
  }
  .custom-shadow {
    width: 95%;
    margin-top: 25rpx;
  }
  .botbuttom {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15rpx 0;
    background-color: #fff;
  }
  .tjhzBox {
    font-size: 24rpx !important;
    font-weight: regular !important;
    line-height: 38rpx !important;
    color: #16c2a3 !important;
    text-align: left;
    letter-spacing: 0px;
  }
  .morenBox {
    font-size: 18rpx !important;
    font-weight: regular !important;
    line-height: 28rpx !important;
    color: #ffffff !important;
    text-align: left;
    letter-spacing: 0px;
  }
}
</style>
